<template>
	<view class="container">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left"></view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">市场</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right" @tap="goQuotation('/pages/market/quotation')">行情</view>
			</view>
		</u-navbar>
		
		<view class="headBox">
			<view class="searchBox">
				<view class="content">
					<u-icon name="search" class="searchIcon" color="#999" size="40upx"></u-icon>
					<input type="text" @input="nameChange" v-model="listQuery1.keyName" placeholder="请输入商品" />
				</view>
			</view>
			<view class="filterCriteria">
				<view class="typeBox">
					<view class="title allType">全部类型<u-icon name="arrow-down" color="#9a9a9a" size="36upx"></u-icon></view>
				</view>
				<view class="typeBox">
					<view class="title">最新上架<u-icon name="arrow-down" color="#9a9a9a" size="36upx"></u-icon></view>
				</view>
			</view>
		</view>
		
		<view class="tabList">
			<view class="goods_list">
				<scroll-view class="listview"
				 enableBackToTop="true" scroll-y @scrolltolower="scrolltolower()">
					<view class="goods_box">
						<view class="goods_list_item" v-for="(item,index) in tabList" :key="index"  @tap="navTo('/pages/detail/goodsDetail?id='+item.id+'&castingId='+item.castingId,index)">
							<view class="main">
								<view class="show_img">
									<image class="img" :src="pathImg+item.fileUrl" :id="'image'+index" mode="widthFix" />
								</view>
								<view class="goods_desc">
									<view class="goods_Main">
										<view class="cont">
											<view class="desc_title">
												<text>{{item.collName}}</text>
												<image v-if="setImgShow(item) == 1" src="@/static/home/fileType1.png" mode="widthFix"></image>
												<image v-if="setImgShow(item) == 2" src="@/static/home/fileType2.png" mode="widthFix"></image>
												<image v-if="setImgShow(item) == 3" src="@/static/home/fileType3.png" mode="widthFix"></image>
											</view>
										</view>
									</view>
									<view class="desc_price">
										<view class="desc_prices">￥<text>{{item.price}}</text></view>
										<view class="number">{{"#"+item.sortSn+"/"+item.castingAmount}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-show="tabList.length == 0" class="noListBox">
						<view class="noData">
							<image class="noDataImg" src="../../static/noData.png" mode=""></image>
						</view>
					</view>
				</scroll-view>
				<view class="msg" v-if="isEnd">— 更多内容敬请期待 —</view>
			</view>
		</view>
		
		<mix-loading ref="min_loading"></mix-loading>
		
	</view>
</template>
<script>
	import {
		PATH_IMG,
		BASE_API
	} from '@/common/config.js';
	import {
	    mapState ,mapMutations
	} from 'vuex'; 
	import {getNftresalepaying} from '../../api/home.js'
	export default {
		data() {
			return {
				isEnd: false,
				listQuery1: {
					page: 1,
					pageSize: 10,
					pages:1,
					total:0,
					time:"",//1上架时间正序商家时间倒序
					castingId:"",
					priceSort:"1",//	价格排序1正序0倒序
					keyName:"",
					sellStatus:"",//售卖状态 1售卖中 2排队
				},
				tabList:[],
				timerFn:null
			}
		},
		onShow() {
			this.getData();
		},
		computed:{
			...mapState(["hasLogin","uerInfo","h5Data"])
		},
		methods: {
			nameChange(val){
				clearTimeout(this.timerFn);
				this.timerFn = setTimeout(()=>{
					this.getData();
				},1500);
			},
			setImgShow(cur){///判断文件类型
				if(cur.metafile.FileType){
					if(cur.metafile.FileType == ".glb"){
						return 3;
					}else if(cur.metafile.FileType == ".mp4"){
						return 2;
					}else{
						return 1;
					}
				}
				return 0;
			},
			goQuotation(url){
				uni.navigateTo({
					url
				});
			},
			scrolltolower(){
				if(this.listQuery1.pages > this.listQuery1.page){
					this.listQuery1.page++;
					this.getData();
				}else{
					this.isEnd = true;
				}
			},
			getData(flag){
				this.$nextTick(()=>{
					this.$refs.min_loading.open('加载中，请稍后！');
				});
				getNftresalepaying(this.listQuery1).then(res => {
					if (res.data.success) {
						let list = res.data.obj.list;
						this.listQuery1.pages = res.data.obj.pages;
						if (list.length == 0 || list.length == 1) {
							this.isEnd = true;
						}
						if (list.length == 0) {
							return
						}
						
						let newList = list.map((item, index) => {
							if(item.metafile){
								item.metafile = JSON.parse(item.metafile);
							}
							return item;
						});
						
						if (this.listQuery1.page == 1) {
							this.tabList = [...newList];
						} else {
							this.tabList = [...this.tabList,...newList];
						}
					}else{
						uni.stopPullDownRefresh();
					}
					this.isEnd = true;
				}).catch(err=>{
					this.isEnd = true;
					uni.stopPullDownRefresh();
				}).finally(() => {
					uni.stopPullDownRefresh();
					this.$refs.min_loading.close();
				});
			},
			navTo(url, index) {
				uni.navigateTo({
					url
				});
			},
			goDetails(cur){
				uni.navigateTo({
					url:"/pages/detail/myGoodsDetail?id="+cur.id
				});
			}
		},
		onPullDownRefresh() {
			this.listQuery1 = {
				page: 1,
				pageSize: 10,
				pages:1,
				total:0,
				time:"",//1上架时间正序商家时间倒序
				castingId:"",
				priceSort:"1",//	价格排序1正序0倒序
				keyName:"",
				sellStatus:"",//售卖状态 1售卖中 2排队
			};
			this.getData(true);
		}
	}
</script>
<style scoped lang="less">
	page{width: 100%;height: 100%;}
	.container {
		width: 100%;
		height: 100%;
		.headBox{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30upx;
			padding-top: 148upx;
			.filterCriteria{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.typeBox{
					.allType{margin-right: 30upx;margin-left: 40upx;}
					.title{
						display: flex;
						align-items: center;
						justify-content: center;
						color: #3a4559;
						font-size: 24upx;
					}
				}
			}
			.searchBox{
				flex: 1%;
				.content{
					display: flex;
					align-items: center;
					height: 60upx;
					width: 100%;
					background-color: #fff;
					border-radius: 40upx;
					padding: 0 20upx;
					.searchIcon{margin-top: 6upx;}
					input{
						font-size: 26upx;
						margin-left: 10upx;
						flex: 1%;
					}
				}
				
			}
		}
		.icon-right{
			color: #fff;
			font-size: 24upx;
			padding-top: 30upx;
		}
		.logoBox{
			width: 100%;
			height: 100%;
			.navBox{
				display: flex;
				align-items: center;
				justify-content: center;
				height: 120upx;
				background-image: url("@/static/common/bg1.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				text-align: center;
				color: #fff;
			}
		}
		.tabList{
			width: 100%;
			height: calc(100% - 180upx);
			padding-top: 30upx;
			.goods_list {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 0 40upx;
				.listview{
					width: 100%;
					height: 100%;
					.goods_box{
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						padding-bottom: 40upx;
						.goods_list_item {
							width: 50%;
							margin-bottom: 30upx;
							.main {
								background-color: #fff;
								overflow: hidden;
								width: 100%;
								border-radius: 20upx;
								.show_img {
									width: 100%;
									height: 288upx;
									position: relative;
									overflow: hidden;
									display: flex;
									align-items: center;
									border-radius: 20upx;
									.img {
										width: 100%;
										display: block;
									}
								}
									
								.goods_desc {
									width: 100%;
									padding-top: 20upx;
									padding-bottom: 30upx;
									position: relative;
									.goods_Main{
										display: flex;
										justify-content: space-between;
										align-items: center;
										position: relative;
										padding: 0 20upx;
										margin-bottom: 30upx;
										width: 100%;
										.cont{
											width: 100%;
											.desc_title{
												font-size: 24upx;
												font-weight: 400;
												color: #333;
												width: 100%;
												display: flex;
												justify-content: space-between;
												align-items: center;
												text{
													flex: 1%;
													display: inline-block;
													text-align: left;
													padding-right: 20upx;
												}
												image{
													width:26upx;
												}
											}
										}
										
									}
									
									.desc_price{
										display: flex;
										align-items: center;
										justify-content: space-between;
										padding-left: 20upx;
										.desc_prices{
											color: #EB5703;
											font-size: 28upx;
											height: 40upx;
											line-height: 40upx;
											text{
												display: inline-block;
												line-height: 40upx;
												font-size: 40upx;
											}
										}
										.number{
											height: 33upx;
											line-height: 33upx;
											background-color: #DDE1EA;
											border-radius: 17px 0px 0px 17px;
											font-size: 20upx;
											color: #666;
											padding-left: 14upx;
											padding-right: 8upx;
										}
									}
								}
							}
						}
						.goods_list_item:nth-child(odd){
							padding-right: 15upx;
						}
						.goods_list_item:nth-child(even){
							padding-left: 15upx;
						}
					}
				}
				
				.msg {
					width: 100%;
					text-align: center;
					color: rgba(255, 255, 255, .5);
					font-size: 24upx;
					z-index: 2;
				}
				
			}
		}	
		
		.noListBox {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			.noData {
				width: 220upx;
				height: 180upx;
				margin: 0 auto;
				margin-top: 100upx;
				.noDataImg {
					width: 220upx;
					height: 180upx;
				}
			}
		}
	}
</style>
